<!DOCTYPE html>
<html xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout" xmlns:th="http://www.thymeleaf.org"
      layout:decorate="~{admin/layout}">
<body>

<div id="div_content" class="content-wrap" layout:fragment="content">
    <style>
        .jianju {
            margin: 5px;
        }
    </style>

    <main id="content" class="content" role="main">
        <ol class="breadcrumb">
            <li>苗圃总览</li>
            <li class="active">数据预览</li>
        </ol>
        <div class="row">
            <div class="col-lg-3 col-md-6">
                <section class="widget widget-card bg-primary text-white">
                    <div class="widget-body clearfix">
                        <div class="row">
                            <div class="col-xs-3">
                                <span class="widget-icon">
                                    <i class="glyphicon glyphicon-globe"></i>
                                </span>
                            </div>
                            <div class="col-xs-9">
                                <h6 class="no-margin">区域数量</h6>
                                <p class="h2 no-margin fw-normal" th:text="${blue}"></p>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-xs-6">
                                <h6 class="no-margin">地块数量：</h6>
                                <p class="value5" th:text="${blue1}"></p>
                            </div>
                            <div class="col-xs-6 fs-sm">
                                <h6 class="no-margin">已种植地块：</h6>
                                <p class="value5" th:text="${blue2}"></p>
                            </div>
                        </div>
                    </div>
                </section>
            </div>
            <div class="col-lg-3 col-md-6">
                <section class="widget widget-card bg-info text-white">
                    <div class="widget-body clearfix">
                        <div class="row">
                            <div class="col-xs-3">
                                <span class="widget-icon">
                                    <i class="glyphicon glyphicon-globe"></i>
                                </span>
                            </div>
                            <div class="col-xs-9">
                                <h6 class="no-margin">苗木总数量</h6>
                                <p class="h2 no-margin fw-normal" th:text="${cyan}"></p>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-xs-6">
                                <h6 class="no-margin">苗木种类：</h6>
                                <p class="value5" th:text="${cyan1}"></p>
                            </div>
                            <div class="col-xs-6 fs-sm">
                                <h6 class="no-margin">苗木规格：</h6>
                                <p class="value5" th:text="${cyan2}"></p>
                            </div>
                        </div>
                    </div>
                </section>
            </div>
            <div class="col-lg-3 col-md-6">
                <section class="widget widget-card bg-gray text-white">
                    <div class="widget-body clearfix">
                        <div class="row">
                            <div class="col-xs-3">
                                <span class="widget-icon">
                                    <i class="glyphicon glyphicon-globe"></i>
                                </span>
                            </div>
                            <div class="col-xs-9">
                                <h6 class="no-margin">待定</h6>
                                <!-- <p class="h2 no-margin fw-normal" th:text="${black}"></p>-->
                            </div>
                        </div>
                        <!--  <div class="row">
                              <div class="col-xs-6">
                                  <h6 class="no-margin">死苗数量：</h6>
                                  <p class="value5" th:text="${black1}"></p>
                              </div>
                              <div class="col-xs-6 fs-sm">
                                  <h6 class="no-margin">死亡批次：</h6>
                                  &lt;!&ndash;<p class="value5" th:each="black2 :${black2}" th:text="${black2.batchNumber}"></p>&ndash;&gt;
                              </div>
                          </div>-->
                    </div>
                </section>
            </div>
            <div class="col-lg-3 col-md-6">
                <section class="widget widget-card bg-success text-white">
                    <div class="widget-body clearfix">
                        <div class="row">
                            <div class="col-xs-3">
                                <span class="widget-icon">
                                    <i class="glyphicon glyphicon-volume-down"></i>
                                </span>
                            </div>
                            <div class="col-xs-9">
                                <h6 class="no-margin">消息总数</h6>
                                <a style="text-decoration:none;color:#fff;"><p
                                        class="h2 no-margin fw-normal" th:text="${red1+red2+red3}"></p></a>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-xs-6" style="width: 33.3%;">
                                <h6 class="no-margin">入库待审批</h6>
                                <a style="text-decoration:none;color:#fff;" th:href="@{/admin/finance/put}"><p
                                        class="value5" th:text="${red1}"></p></a>
                            </div>
                            <div class="col-xs-6" style="width: 33.3%;">
                                <h6 class="no-margin">出库待审批</h6>
                                <a style="text-decoration:none;color:#fff;" th:href="@{/admin/finance/out}"><p
                                        class="value5" th:text="${red2}"></p></a>
                            </div>
                            <div class="col-xs-6" style="width: 33.3%;">
                                <h6 class="no-margin">死苗确认</h6>
                                <a style="text-decoration:none;color:#fff;" th:href="@{/admin/finance/die}"><p
                                        class="value5" th:text="${red3}"></p></a>
                            </div>
                        </div>
                    </div>
                </section>
            </div>
        </div>
        <div class="row mb-lg">
            <div class="col-lg-12">
                <div class="tabPanel">
                    <!--<ul>-->
                    <!--<li th:each="areaLocation :${areaLocation}">-->
                    <!--<a th:href="@{/admin/areaLocation/individual(areaLocation_id=${areaLocation.areaLocation_id})}"><span th:text="${areaLocation.serialNumber}"></span>地块</a>-->
                    <!--</li>-->
                    <!--</ul>-->
                    <canvas id="c1" width="11900" height="2000"> <!--宽高写在html里，写在css里有问题-->
                        <span>该浏览器不支持canvas内容</span> <!--对于不支持canvas的浏览器显示-->
                    </canvas>
                </div>
                <div id="imgdiv"
                     style="filter:alpha(opacity=90);-moz-opacity:0.9;opacity: 0.9; position:absolute;top:20px;right:30px;z-index:99; text-align:left;padding-left: 10px;padding-right:10px;padding-top: 6px;padding-bottom: 6px">
                    <img th:src="@{/img/allarea.jpg}" id="allarea_img" style="width: 360px;height:400px"/>
                </div>
                <div id="fudiv"
                     style="filter:alpha(opacity=90);-moz-opacity:0.9;opacity: 0.9; background:black; position:absolute;top:100px;z-index:99; text-align:left;display: none;padding-left: 10px;padding-right:10px;padding-top: 6px;padding-bottom: 6px">
                    <span id="fuspan" style="color:#fff;">hhh</span>
                </div>
            </div>

            <!--<div class="col-lg-6" >-->
            <!--<div class="panes">-->
            <!--<div class="pane" th:each="areaLocation :${areaLocation}">-->
            <!--<div class="collapse-card" >-->
            <!--<div class="collapse-card__heading" >-->
            <!--<a th:each="landMasses :${areaLocation.landMasses}" class="jianju btn btn-success width-100 mb-xs buttoon-height"role="button" onclick="getLandMass(this.id)" th:id="${landMasses.landMass_id}" >-->
            <!--<span th:text="${landMasses.areaLocation.serialNumber}"></span>-<span th:text="${landMasses.serialNumber}"></span>-->
            <!--</a>-->
            <!--</div>-->
            <!--</div>-->
            <!--</div>-->
            <!--</div>-->
            <!--<section class="widget"  >-->
            <!--<div class="widget-body" style="height:350px;overflow:auto;" id="counties"></div>-->
            <!--</section>-->
            <!--</div>-->

            <script>
                var oC = document.getElementById('c1');
                var canvas = oC.getContext('2d');
                var arrs = new Array();
                var arrs2 = new Array();
                var scalearrs = new Array();
                var scalearrs2 = new Array();
                var scale = 1;
                var clicki=100;
                var returnval;
                function Area(id, name, x, y, w, h, landMasses) {
                    this.id = id;
                    this.name = name;
                    this.x = x;
                    this.y = y;
                    this.w = w;
                    this.h = h;
                    this.landMasses = landMasses;
                }
                function tsland(name, lefttopx, lefttopy, leftdownx, leftdowny, righttopx, righttopy, rightdownx, rightdowny) {
                    this.name = name;
                    this.lefttopx = lefttopx;
                    this.lefttopy = lefttopy;
                    this.leftdownx = leftdownx;
                    this.leftdowny = leftdowny;
                    this.righttopx = righttopx;
                    this.righttopy = righttopy;
                    this.rightdownx = rightdownx;
                    this.rightdowny = rightdowny;
                }
                var isfind = false;
                findArea = function (x, y) {
                    isfind = false;
                    if (scalearrs == null)return -1;
                    else {
                        var len = scalearrs.length;
                        for (var i = 0; i < len; i++) {
                            if (x > scalearrs[i].x && x < scalearrs[i].x + scalearrs[i].w && y > scalearrs[i].y && y < scalearrs[i].y + scalearrs[i].h) {
//                                return i;
                                var landmasses = arrs[i].landMasses;
                                for (var j = 0; j < landmasses.length; j++) {
                                    var landobj = landmasses[j];
                                    if (landobj == null)return -1;
                                    var xcoordinate = scalearrs[i].x + landobj.xcoordinate * scale;
                                    var ycoordinate = scalearrs[i].y + landobj.ycoordinate * scale;
                                    if (x > xcoordinate && x < xcoordinate + landobj.breadth * scale && y > ycoordinate && y < ycoordinate + landobj.length * scale) {
                                        $("#fudiv").show();
                                        $("#fudiv").css("left", xcoordinate);
                                        $("#fudiv").css("top", ycoordinate + landobj.length * scale);
                                        $("#fudiv").css("width", 80);
//                                        $("#fudiv").css("heigh",30);
                                        if (landobj.plant != -1) {
                                            if (landobj.plant > 0) {
                                                $("#fuspan").html("地块:" + scalearrs[i].name + landobj.serialNumber + "</br>长:" + landobj.length + "</br>宽:" + landobj.breadth + "<br />可种植:" + landobj.amount + "<br />已种植:" + landobj.plant + "<br />树种:" + landobj.treeSpecies);
                                            } else {
                                                $("#fuspan").html("地块:" + scalearrs[i].name + landobj.serialNumber + "<br />长:" + landobj.length + "</br>宽:" + landobj.breadth + "<br />可种植:" + landobj.amount + "<br />已种植:" + landobj.plant);
                                            }
                                        } else {
                                            $("#fuspan").html("地块:" + scalearrs[i].name + landobj.serialNumber + "<br />长:" + landobj.length + "</br>宽:" + landobj.breadth + "<br />未划分地块");
                                        }
                                        isfind = true;
                                    }
                                }
                            }
                        }
                        if (isfind == false) {
                            $("#fudiv").hide();
                        } else {
                            $("#fudiv").show();
                        }
                    }
                    return -1;
                };
                findSmallArea = function (x, y) {
                    if (scalearrs == null)return -1;
                    else {
                        var len = scalearrs.length;
                        for (var i = 0; i < len; i++) {
                            if (x > scalearrs[i].x && x < scalearrs[i].x + scalearrs[i].w && y > scalearrs[i].y && y < scalearrs[i].y + scalearrs[i].h) {
//                                return i;
                                var landmasses = arrs[i].landMasses;
                                for (var j = 0; j < landmasses.length; j++) {
                                    var landobj = landmasses[j];
                                    if (landobj == null)return -1;
                                    var xcoordinate = scalearrs[i].x + landobj.xcoordinate * scale;
                                    var ycoordinate = scalearrs[i].y + landobj.ycoordinate * scale;
//                                    drawArea2(landobj.xcoordinate,landobj.ycoordinate,landobj.breadth*scale,landobj.length*scale,landmasses[j]);
                                    if (x > xcoordinate && x < xcoordinate + landobj.breadth * scale && y > ycoordinate && y < ycoordinate + landobj.length * scale) {
                                        return landobj.landMass_id;
                                    }
                                }
                            }
                        }
                    }
                    return -1;
                };
                oC.addEventListener('click', function (ev) {
                    var e = ev || window.event;//获取event对象
                    var rect = oC.getBoundingClientRect();
                    var x = e.clientX - rect.left * (oC.width / oC.width);
                    var y = e.clientY - rect.top * (oC.height / oC.height);
                    var index = findSmallArea(x, y);
                    if (index != -1) {
                        location.href = "/admin/landMass/treeWell?landMass_id=" + index;
                    }
                }, false);
                //                $("#fudiv").css("left",scalearrs[i].x+18);
                //                $("#fudiv").css("top",scalearrs[i].y);
                //                $("#fudiv").css("width",scalearrs[i].w)
                oC.onmousemove = function (ev) {
                    var e = ev || window.event;//获取event对象
                    var rect = oC.getBoundingClientRect();
                    var x = e.clientX - rect.left * (oC.width / oC.width);
                    var y = e.clientY - rect.top * (oC.height / oC.height);
                    var index = findArea(x, y);
                    if (index != -1) {
//                        $("#fudiv").show();
//                        $("#fudiv").css("left",scalearrs[index].x+14);
//                        $("#fudiv").css("top",scalearrs[index].y);
//                        $("#fudiv").css("width",scalearrs[index].w);
//                        var treespec=returnval[index].treespec==""?"":"<br/>树种类:"+returnval[index].treespec;
//                        $("#fuspan").html("子地块:"+returnval[index].radius+"</br>树总数:"+returnval[index].roadBreadth+"棵"+treespec);
//                        setTimeout(function () {
//                            $("#fudiv").hide();
//                        },2000)
                    }
                };
                drawArea = function (x, y, w, h) {
                    canvas.strokeStyle = "#555555";
                    canvas.lineWidth = 1;
                    canvas.fillStyle = "#f2be35";
//                    canvas.fillRect(x, y, w, h);
                    canvas.strokeRect(x, y, w, h);
                };
                function flush() {
                    canvas.clearRect(0, 0, 11920, 11720);
                    scalearrs = new Array();
                    for (var i = 0; i < arrs.length; i++) {
                        var landmasses = arrs[i].landMasses;
                        scalearrs.push(new Area(arrs[i].id, arrs[i].name, arrs[i].x * scale, arrs[i].y * scale, arrs[i].w * scale, arrs[i].h * scale, landmasses));
                    }
                    for (var i = 0; i < scalearrs.length; i++) {
                        var obj = scalearrs[i];
//                        canvas.fillStyle = "#f2be44";
//                        canvas.fillRect(obj.x, obj.y, obj.w, obj.h);
//                        drawArea(obj.x, obj.y, obj.w, obj.h);
//                        canvas.strokeStyle = "#0000ff";
//                        canvas.lineWidth=2;
//                        canvas.strokeRect(obj.x, obj.y, obj.w, obj.h);
//                        canvas.strokeStyle = "#0000ff";
//                        drawArea(obj.x, obj.y, obj.w, obj.h);
                        var landmasses = scalearrs[i].landMasses;
                        if (landmasses.length > 0) {
                            for (var j = 0; j < landmasses.length; j++) {
                                if (landmasses[j] != null) {
                                    var landobj = landmasses[j];
                                    var xcoordinate = obj.x + landobj.xcoordinate * scale;
                                    var ycoordinate = obj.y + landobj.ycoordinate * scale;
                                    if (landobj.shapetype == 0) {
                                        drawArea2(xcoordinate, ycoordinate, landobj.breadth * scale, landobj.length * scale, landmasses[j]);
                                    } else {
                                        drawpath(obj, landobj.lefttopx * scale, landobj.lefttopy * scale, landobj.leftdownx * scale, landobj.leftdowny * scale, landobj.righttopx * scale, landobj.righttopy * scale, landobj.rightdownx * scale, landobj.rightdowny * scale, landmasses[j]);
                                        canvas.font = 10 + "px Arial";
                                        canvas.fillStyle = "black";
//                                        canvas.fillText(landobj.serialNumber + "", (obj.x*4+(landobj.lefttopx+landobj.leftdownx+landobj.righttopx+landobj.rightdownx)*scale)/ 4.0 - 5,(obj.y*4+scale*(landobj.lefttopy +landobj.leftdowny+landobj.righttopy+landobj.rightdowny))/4.0 + 5);
                                    }
                                }
                            }
                        }
                        canvas.fillStyle = "#242424";
                        canvas.font = "20px Arial";
                        canvas.fillText(obj.name + "区域", obj.x + obj.w / 2.0 - 24, obj.y + obj.h / 2.0 + 5);
                        if(i==clicki){
                            canvas.strokeStyle = "#d95938";
                        }else{
                            canvas.strokeStyle = "#555555";
                        }
                        canvas.lineWidth = 4;
                        canvas.strokeRect(obj.x, obj.y, obj.w, obj.h);
                    }
                }
                ;
                function drawpath(obj, lefetopx, lefttopy, leftdownx, leftdowny, righttopx, righttopy, rightdownx, rightdowny, landmass) {
                    canvas.strokeStyle = "black";
                    if (landmass.plant > 0) {
                        canvas.fillStyle = "#95cf58";
                        if (landmass.plant < landmass.amount) {
                            var plant = parseFloat(landmass.plant);
                            var amount = parseFloat(landmass.amount);
                            var t1 = plant / amount;
                            var t2 = 1.0 - t1;
                            var lefetopx2 = t2 * (leftdownx - lefetopx) + lefetopx;
                            var lefttopy2 = t2 * (leftdowny - lefttopy) + lefttopy;
                            var righttopx2 = t2 * (rightdownx - righttopx) + righttopx;
                            var righttopy2 = t2 * (rightdowny - righttopy) + righttopy;
                            canvas.beginPath();
                            canvas.lineTo(obj.x + lefetopx2, obj.y + lefttopy2);
                            canvas.lineTo(obj.x + leftdownx, obj.y + leftdowny);
                            canvas.lineTo(obj.x + rightdownx, obj.y + rightdowny);
                            canvas.lineTo(obj.x + righttopx2, obj.y + righttopy2);
                            canvas.lineTo(obj.x + lefetopx, obj.y + lefttopy2);
                            canvas.closePath();
                            canvas.fill();
//                            canvas.fillRect(x,obj.y+lefttopy+h*t2,w,h*t1);
                        } else {
                            canvas.beginPath();
                            canvas.lineTo(obj.x + lefetopx, obj.y + lefttopy);
                            canvas.lineTo(obj.x + leftdownx, obj.y + leftdowny);
                            canvas.lineTo(obj.x + rightdownx, obj.y + rightdowny);
                            canvas.lineTo(obj.x + righttopx, obj.y + righttopy);
                            canvas.lineTo(obj.x + lefetopx, obj.y + lefttopy);
                            canvas.closePath();
                            canvas.fill();
                        }
                    } else {
                        canvas.fillStyle = "#edfbed";
                        canvas.beginPath();
                        canvas.lineTo(obj.x + lefetopx, obj.y + lefttopy);
                        canvas.lineTo(obj.x + leftdownx, obj.y + leftdowny);
                        canvas.lineTo(obj.x + rightdownx, obj.y + rightdowny);
                        canvas.lineTo(obj.x + righttopx, obj.y + righttopy);
                        canvas.lineTo(obj.x + lefetopx, obj.y + lefttopy);
                        canvas.closePath();
                        canvas.fill();
                    }
                    //边框
                    lefetopx += obj.x;
                    leftdownx += obj.x;
                    lefttopy += obj.y;
                    leftdowny += obj.y;
                    righttopx += obj.x;
                    rightdownx += obj.x;
                    righttopy += obj.y;
                    rightdowny += obj.y;
                    canvas.lineWidth = 1;
                    canvas.beginPath();
                    canvas.lineTo(lefetopx, lefttopy);
                    canvas.lineTo(leftdownx, leftdowny);
                    canvas.lineTo(rightdownx, rightdowny);
                    canvas.lineTo(righttopx, righttopy);
                    canvas.lineTo(lefetopx, lefttopy);
                    canvas.closePath();
                    canvas.stroke();
                }
                function drawArea2(x, y, w, h, landmass) {
                    canvas.fillStyle = "#edfbed";
                    canvas.fillRect(x, y, w, h);
                    if (landmass.plant > 0) {
                        canvas.fillStyle = "#95cf58";
                        if (landmass.plant < landmass.amount) {
                            var plant = parseFloat(landmass.plant);
                            var amount = parseFloat(landmass.amount);
                            var t1 = plant / amount;
//                            if(t1>0.5){
//                                canvas.fillStyle="#558239"
//                            }
                            var t2 = 1.0 - t1;
                            canvas.fillRect(x, y + h * t2, w, h * t1);
                        } else {
                            canvas.fillRect(x, y, w, h);
                        }
                    }
                    var fontsize = 10;
                    canvas.font = fontsize + "px Arial";
                    canvas.fillStyle = "black";
//                    canvas.fillText(landmass.serialNumber,x+w/2.0-7,y+h/2.0+5);
//                    canvas.strokeStyle = "#555555";
                    canvas.strokeStyle = "black";
                    canvas.lineWidth = 1;
                    canvas.strokeRect(x, y, w, h);
                }
                $.ajax({
                    url: "/admin/areaLocation/listArea",
                    type: 'POST',
                    async: false,
                    success: function (data) {
                        console.log("data", data);
                        var res = data.res;
                        returnval = res;
                        console.log(res);
                        for (var i = 0; i < res.length; i++) {
                            var obj = res[i];
                            arrs.push(new Area(obj.areaLocation_id, obj.serialNumber, obj.xpos, obj.ypos, obj.breadth, obj.length, obj.landMasses))
                        }
                        flush();
                    },
                    error: function (xhr) {
                        console.log("error");
                    }
                });
                var i=0;

                window.addEventListener('scroll',function(){
                    console.log(i++);
                    scrollimg();
                },false);
                $("#allarea_img").click(function (e) {
                    var data=getClickPos(e);
                    var c=findClickArea(data.X,data.Y);
                    clicki=c;
                    flush();
//                    alert("click"+clicki);
//                    alert("Area:"+c);
                    if(c!=null)
                    window.scrollTo(0,scalearrs[c].y)
                });
                function getClickPos(e){
                    var xPage = (navigator.appName == 'Netscape')? e.pageX : event.x+document.body.scrollLeft;
                    var yPage = (navigator.appName == 'Netscape')? e.pageY : event.y+document.body.scrollTop;
                    identifyImage = document.getElementById("allarea_img");
                    img_x = locationLeft(identifyImage);
                    img_y = locationTop(identifyImage);
                    var xPos = xPage-img_x;
                    var yPos = yPage-img_y;
//                    alert('X : ' + xPos + '\n' + 'Y : ' + yPos);
                    return {"X":xPos,"Y":yPos};
                }
                //find the screen location of an element
                function locationLeft(element){
                    offsetTotal = element.offsetLeft;
                    scrollTotal = 0; //element.scrollLeft but we dont want to deal with scrolling - already in page coords
                    if (element.tagName != "BODY"){
                        if (element.offsetParent != null)
                            return offsetTotal+scrollTotal+locationLeft(element.offsetParent);
                    }
                    return offsetTotal+scrollTotal;
                }
                //find the screen location of an element
                function locationTop(element){
                    offsetTotal = element.offsetTop;
                    scrollTotal = 0; //element.scrollTop but we dont want to deal with scrolling - already in page coords
                    if (element.tagName != "BODY"){
                        if (element.offsetParent != null)
                            return offsetTotal+scrollTotal+locationTop(element.offsetParent);
                    }
                    return offsetTotal+scrollTotal;
                }
                function scrollimg(){
                    var scroll=GetPageScroll();
                    console.log("scrolly",scroll.Y);
                    $("#imgdiv").css("top", scroll.Y-20);
                }
                function GetPageScroll() {
                    var x, y;
                    if (window.pageYOffset) {    // all except IE
                        y = window.pageYOffset;
                        x = window.pageXOffset;
                    } else if (document.documentElement && document.documentElement.scrollTop) {    // IE 6 Strict
                        y = document.documentElement.scrollTop;
                        x = document.documentElement.scrollLeft;
                    } else if (document.body) {    // all other IE
                        y = document.body.scrollTop;
                        x = document.body.scrollLeft;
                    }
                    return {X: x, Y: y};
                }
                function findClickArea(x, y) {
                    if(x>141&&x<198&&y>76&&y<164){
                        return 0;
                    }else if(x>190&&x<225&&y>74&&y<160){
                        return 1;
                    }else if(x>204&&x<263&&y>166&&y<231){
                        return 2;
                    }else if(x>253&&x<292&&y>158&&y<227){
                        return 3;
                    }else if(x>266&&x<311&&y>356&&y<394){
                        return 5;
                    }else if(x>313&&x<353&&y>352&&y<391){
                        return 4;
                    }
                    return 100;
                }
            </script>
        </div>
    </main>
</div>

</body>
</html>